<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="setIsShow(!isShow)">{{isShow?"隐藏":"显示"}}</button>
    <child v-if="isShow" :set-is-show="setIsShow"></child>
</div>
</body>
<script>
    // 子组件向父组件传递参数：通过函数
    // 1- 父组件以属性的形式向子组件传递一个函数
    // 2- 子组件调用接收的函数（属性），传递的参数即是向父组件传递过去的数据
	new Vue({
		el: "#root",
        data:{
			isShow:true
        },
        methods:{
		    setIsShow(isShow){
				this.isShow = isShow;
            }
        },
        components:{

			Child:{
				props:{
				    setIsShow:Function
				},
				template:(`
				    <div  style="width:400px;height:400px;background:red;">
				        <button @click="setIsShow(false)">隐藏</button>
                    </div>
				`)
            }
        }
	})
</script>
</html>